import React, { useState } from 'react'
import Com from '../component'
import { Input, Select, Radio, Tag } from 'antd'
import { CloseSquareOutlined } from '@ant-design/icons'
import { TwitterPicker } from 'react-color'
const { Option } = Select

const formItem = { display: "flex", alignItems: "center", marginBottom: "20px" }
const labelStyle: any = { flexBasis: "100px", textAlign: "right" };

const Right = (props: any) => {
    const { formData, setFormData } = props

    const [colorVisable, setColorVisable] = useState(false)
    return (
        <>
            <div style={formItem}>
                <div style={labelStyle}> 文本名：</div>
                <Input value={formData.title} onChange={(e) => {
                    setFormData({ ...formData, title: e.target.value })
                }} style={{ flex: 1 }} />
            </div>

            <div style={formItem}>
                <div style={labelStyle}> 副文本：</div>
                <Input value={formData.deputy_text} onChange={(e) => {
                    setFormData({ ...formData, deputy_text: e.target.value })
                }} style={{ flex: 1 }} />
            </div>
            <div style={formItem}>
                <div style={labelStyle}> 字体大小：</div>
                <Select style={{ width: "100px" }} defaultValue={12}>
                    <Option value={12}>12px</Option>
                </Select>
            </div>
            <div style={formItem}>
                <div style={labelStyle}>对齐方式：</div>
                <Radio.Group defaultValue={"left"} onChange={(e) => {
                    setFormData({ ...formData, text_align: e.target.value })
                }}>
                    <Radio value="left">居左</Radio>
                    <Radio value="center">居中</Radio>
                    <Radio value="right">居右</Radio>
                </Radio.Group>
            </div>
            <div style={formItem}>
                <div style={labelStyle}> 背景颜色：</div>
                <div style={{ position: "relative" }}>
                    <Tag
                        color={formData.font_color} onClick={() => setColorVisable(true)}
                        style={{ cursor: "pointer" }}>
                        取色
                    </Tag>
                    {colorVisable && <CloseSquareOutlined onClick={() => setColorVisable(false)} />}
                    {colorVisable && <div style={{ position: "absolute", top: "35px", left: 0, zIndex: 1 }}>
                        <TwitterPicker onChangeComplete={(color: any) => {
                            setFormData({ ...formData, background_color: color.hex })
                        }} />
                    </div>}
                </div>
            </div>
        </>
    )
}

const Left = (props: any) => {
    const { formData } = props
    const divStyle = { textAlign: formData.text_align, backgroundColor: formData.background_color }
    return (
        <div style={divStyle}>
            {formData.title}
            <div style={{ fontSize: "12px", color: "#8c8c8c" }}>{formData.deputy_text}</div>
        </div>
    )
}

export default (props: any) => {
    const [formData, setFormData] = useState({
        title: "『文本』",
        deputy_text: "",
        background_color: "white",
        text_align: "left"
    })
    return (
        <Com {...props} left={<Left formData={formData} />} right={<Right formData={formData} setFormData={(data: any) => {
            setFormData(data)
        }} />} />
    )
}